
// 获得字符串“console.log(333)",现在需要通过js将这个字符串备注为可执行语句并执行
// 你可以通过以下方式调用这个函数：
// executeString("console.log(333)");
function executeString(str) {
    new Function(str)();
}


            


// 不使用npm、nodejs、等技术 使用原生js 实现。
// 变量AAA=[{dd:33,ee:55,ff:99},{dd:33,ee:555,ff:991},{dd:313,ee:525,ff:994},]
// 变量BBB=AAA
// 现在创建一个函数ajx_adddd_data(url,AAA)
// 这个函数首先是通过ajax的post方式请求数据，post的路由为传参url。
// 请求下来的数据格式为json，现在将json格式的数据转为列表格式并存储到变量XX中
// 然后在不影响BBB引用AAA的前提下 清空AAA数据里的内容，将变量XX的数据存入AAA中。
        // var AAA = [{dd:33,ee:55,ff:99},{dd:33,ee:555,ff:991},{dd:313,ee:525,ff:994}];
        // var BBB = AAA;
        
        function ajx_adddd_data(url, AAA) {
            // 创建一个新的XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
        
            // 配置请求为POST，并设置url和传输的数据
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
        
            // 设置一个回调函数来处理请求的响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 当请求成功完成时，解析返回的JSON数据
                    var data = JSON.parse(xhr.responseText);
                    
                    // 清空AAA数组的内容
                    AAA.length = 0;
                    
                    // 将解析的数据存入AAA中
                    AAA.push(...data);
                }
            };
        }


// 通过纯js,编写一个函数获取head下的css的url和js的url，并将url保存到新数组中，函数返回这个数组
// 以下是使用纯JavaScript来获取<head>标签下所有CSS和JavaScript文件的URL，并将它们保存到新数组中，然后返回这个数组的函数：
// 以下是使用纯JavaScript来获取<head>标签下所有CSS和JavaScript文件的URL，并将它们保存到新数组中，然后返回这个数组的函数：
// javascript
function getCSSJSUrls() {
  // 创建一个新数组用于保存URL
  var urls = [];

  // 获取所有<link>标签的href属性，其中rel属性为stylesheet的为CSS文件
  var cssLinks = document.querySelectorAll('link[rel="stylesheet"]');
  for (var i = 0; i < cssLinks.length; i++) {
    urls.push(cssLinks[i].href);
  }

  // 获取所有<script>标签的src属性，为JavaScript文件
  var scriptTags = document.querySelectorAll('script[src]');
  for (var i = 0; i < scriptTags.length; i++) {
    urls.push(scriptTags[i].src);
  }

  // 返回包含所有URL的数组
  return urls;
}
// 变量a=[ '/static_dir/csx.css', '/static_rrr/eee']
// 写一个函数 传参有两个 一个是字符串 一个是数组。
// 现在将字符串'/static_dir/rrr.js'和数组a传入这个函数中。
// 我需要判断字符串'/static_dir/rrr.js'是否在变量a中，在函数返回true，不在函数返回false。
function isStringInArray(str, arr) {
    // 使用Array.prototype.includes方法检查字符串是否在数组中
    return arr.includes(str);
}







// 你可以调用这个函数并将结果保存到变量中，例如：

// javascript
// var cssJsUrls = getCSSJSUrls();
// console.log(cssJsUrls);  // 打印所有CSS和JavaScript文件的URL到控制台

// 不使用npm、nodejs、等技术 使用原生js 实现。要求封装成函数 ，函数参数为对象，函数将对象转换成json格式，
// 然后通过ajax向服务器发送post请求 post请求附带json格式的数据{'temp_name':'标签页-工艺设定-查看工艺'}，
// 再然后接受服务器返回的json数据 并将json数据解析成对象。
    function biaoqianye_postJsonToServer(jsonData,id='rersdesr',body_load=false,url="/dongtai",biaoqianyedata_test_flag=false) {
        // console.log('biaoqianyedata_test_flag',biaoqianyedata_test_flag)
        if (biaoqianyedata_test_flag){//不联网本地测试
            serverResponse = {'head':[],
            'js_val1':`
            window.ttttttttteeeessssttdata=[
                {'content':'控制中心'},
                {'content':'查看设备'}
            ]
            new Vue({
                el:'#ttttttttteeeesssstt',
                 data: {// data
                    ttttttttteeeessssttdata: window.ttttttttteeeessssttdata,
                    // data
                 },
               })`, // 加载body_val时才加载的
            'js_val2':"window.ttttttttteeeessssttdata[0].content='rrr'",    // 无论如何都要加载的
            'body_val':`<el-breadcrumb id='ttttttttteeeesssstt' separator="/" style="width: 80%;float:left;margin: 25px;">
            <el-breadcrumb-item  v-for="item in ttttttttteeeessssttdata">{{item.content}}</el-breadcrumb-item>
        </el-breadcrumb>`,
            }
            // 加载head
            for (var i = 0; i < serverResponse.head.length; i++) {
                loadcssjs(serverResponse.head[i])
            }
            if (body_load){ttime(ccount=0,idx=id,innerhtml=serverResponse.body_val,max_ccount=10,js_val=serverResponse.js_val1+'\n'+serverResponse.js_val2)
            }
            else{eval(serverResponse.js_val2)}
            return
        }
        // jsonData ：{'biaoqianye_name':'标签页-a-a'}
        // 需要动态加载的id
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        
        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 当请求加载完成时，此函数将被调用
        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，解析返回的JSON数据
                var serverResponse = JSON.parse(xhr.responseText);
                window.serverResponse=serverResponse
                // console.log('serverResponse')
                // console.log(serverResponse)
                // serverResponse = {'head':['/static/xxxxx.css','xxx'],
                // 'js_val1':'dfsdfsd', // 加载body_val时才加载的
                //'js_val2':'eeeee',    // 无论如何都要加载的
                // 'body_val':'<div id='rrr'><y=''''>',
                // ,}
                // 加载head
                for (var i = 0; i < serverResponse.head.length; i++) {
                    loadcssjs(serverResponse.head[i])
                }
                if (body_load){ttime(ccount=0,idx=id,innerhtml=serverResponse.body_val,max_ccount=10,js_val=serverResponse.js_val1+'\n'+serverResponse.js_val2)}
                else{eval(serverResponse.js_val2)}
            } else {
                // 请求失败，处理错误
                console.error('请求失败，状态码：', xhr.status);
            }
        };
    
        // 当请求发生错误时，此函数将被调用
        xhr.onerror = function () {
            console.error('请求失败，网络错误？');
        };
    
        // 将json数据转换为字符串并发送
        xhr.send(JSON.stringify(jsonData));
    }
        
        // 调用函数，将对象转换为JSON格式并发送
        // var jsonData = {'temp_name': '标签页-工艺设定-查看工艺'};
        // postJsonToServer(jsonData);
        // postJsonToServer({'temp_name': '标签页-工艺设定-查看工艺'})


// javascript的 使用ajax实现 get,put,post,delete,
// 将ajax封装成一个对象，get,put,post,delete为4个属性，
// 分别实现ajax的get,put,post,delete功能 这些功能需要一些必要的传参如url
        var AjaxRequest = {
            // AJAX GET请求
            get: function(url, params, callback) {
              var xhr = new XMLHttpRequest();
              xhr.open('GET', url + '?' + params, true);
              xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                  callback(null, xhr.responseText);
                } else if (xhr.status !== 200) {
                  callback(xhr.status, xhr.responseText);
                }
              };
              xhr.send();
            },
          
            // AJAX PUT请求
            put: function(url, data, callback) {
              var xhr = new XMLHttpRequest();
              xhr.open('PUT', url, true);
              xhr.setRequestHeader('Content-Type', 'application/json');
              xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                  callback(null, xhr.responseText);
                } else if (xhr.status !== 200) {
                  callback(xhr.status, xhr.responseText);
                }
              };
              xhr.send(JSON.stringify(data));
            },
          
            // AJAX POST请求
            post: function(url, data, callback) {
              var xhr = new XMLHttpRequest();
              xhr.open('POST', url, true);
              xhr.setRequestHeader('Content-Type', 'application/json');
              xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                  callback(null, xhr.responseText);
                } else if (xhr.status !== 200) {
                  callback(xhr.status, xhr.responseText);
                }
              };
              xhr.send(JSON.stringify(data));
            },
          
            // AJAX DELETE请求
            delete: function(url, callback) {
              var xhr = new XMLHttpRequest();
              xhr.open('DELETE', url, true);
              xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                  callback(null, xhr.responseText);
                } else if (xhr.status !== 200) {
                  callback(xhr.status, xhr.responseText);
                }
              };
              xhr.send();
            }
          };
        //   你可以通过以下方式使用这个对象：
          
        //   javascript
        //   // 发送一个GET请求，获取数据
        //   AjaxRequest.get('https://api.example.com/data', null, function(err, response) {
        //     if (err) {
        //       console.error('GET请求失败:', err);
        //     } else {
        //       console.log('GET请求成功:', response);
        //     }
        //   });
          
        //   // 发送一个PUT请求，更新数据
        //   var data = { id: 1, name: 'John' };
        //   AjaxRequest.put('https://api.example.com/data/' + data.id, data, function(err, response) {
        //     if (err) {
        //       console.error('PUT请求失败:', err);
        //     } else {
        //       console.log('PUT请求成功:', response);
        //     }
        //   });
          
        //   // 发送一个POST请求，创建数据
        //   var data = { id: null, name: 'Jane' };
        //   AjaxRequest.post('https://api.example.com/data', data, function(err, response) {
        //     if (err) {
        //       console.error('POST请求失败:', err);
        //     } else {
        //       console.log('POST请求成功:', response);
        //     }
        //   });
          
        //   // 发送一个DELETE请求，删除数据
        //   AjaxRequest.delete('https://api.example.com/data/' + data.id, function(err, response) {
        //     if (err) {
        //       console.error('DELETE请求失败:', err);
        //     } else {
        //       console.log('DELETE请求成功:', response);
        //     }
        //   });



var message_list=[]
var message_id_=0;
        // 定义一个全局函数用于模拟$notify
function notify(message, type) {
    // 创建一个新的div元素来作为通知
    const notifyDiv = document.createElement('div');
    // 设置通知的样式
    notifyDiv.style.position = 'fixed';
    notifyDiv.style.right = '16px';
    notifyDiv.style.padding = '10px';
    message_id_=message_id_+1
    if (message_id_>100){message_id_=0}
    notifyDiv.id = 'message_id_'+message_id_;
    notifyDiv.style.top=`${5+message_list.length*75}px`;
    notifyDiv.style['z-index']= '2002';
    notifyDiv.style['background-color'] = type === 'success' ? '#e1f3d8' : 'red';
    notifyDiv.style.color = '#606266';
    notifyDiv.style.zIndex = '1000';
    notifyDiv.style.width=' 330px';
    notifyDiv.style.padding=' 14px 26px 14px 13px';
    notifyDiv.style['border-radius']=' 8px';
    notifyDiv.style['box-sizing']=' border-box';
    notifyDiv.style.border=' 1px solid #ebeef5';
    notifyDiv.style.position=' fixed';
    notifyDiv.style.transition='top 0.5s ease-in-out';
    notifyDiv.style['box-shadow']=' 0 2px 12px 0 rgba(0,0,0,.1)';
    notifyDiv.className='notify_cussess'
    if (type=='success'){var title='成功'}
    else if (type=='error'){var title = '失败'}
    notifyDiv.innerHTML=`<h2 class="notify_${type}_title">${title}</h2><p class='notify_${type}_p'>${message}</p>`
    // 添加消息到通知元素
    // notifyDiv.textContent = message;
  
    // 将通知元素添加到文档中
    document.body.appendChild(notifyDiv);
    message_list.push(notifyDiv)
    // 在3秒后自动关闭通知
    setTimeout(() => {
        message_list[0].remove();
        message_list.shift();
        // console.log('message_list.length',message_list.length)
        for (var i = 0; i < message_list.length; i++) {
            
            message_list[i].style.top=`${5+i*75}px`;
            // console.log('message_list[i].top',message_list[i].top)
        }
    }, 3000);
  }
  
  // 使用示例
//   function $notify(message, type) {
//     // 创建一个新的div元素来作为通知
//     const notifyDiv = document.createElement('div');
  
//     // 设置通知的样式
//     notifyDiv.className='notify_cussess'
//     if (type=='success'){
//         notifyDiv.innerHTML=`<h2 class="notify_cussess_title">成功</h2><p notify_cussess_title>{message}</p>`
//     } else if (type=='error'){
//         notifyDiv.innerHTML=`<h2 class="notify_cussess_title">失败</h2><p notify_cussess_title>{message}</p>`
//     }
    
//     // 添加消息到通知元素
//     notifyDiv.textContent = message;
  
//     // 将通知元素添加到文档中
//     document.body.appendChild(notifyDiv);
  
//     // 在3秒后自动关闭通知
//     setTimeout(() => {
//       notifyDiv.remove();
//     }, 300000);
//   }




///////////////canvas
// 绑定canvas 使的canvas可以不失真的放大缩小
// {/* <div id="canvasrr" style="
// width: 100%;
// height: 100%;
// "><canvas></canvas></div>
// <script> */}
// //绑定canvas画布工具
var canvas_set=function(div_id,data_info=null){
  
  //获取画布对象
  let div_obj=document.getElementById(div_id);
  //获取canvas对象
  let canvas_obj=div_obj.firstChild
  //为canvas对象创建css：用来控制canvas对象的大小
  let canvas_obj_class_name=div_id+'_canvas_class'//定义css类名
  canvas_obj.className=canvas_obj_class_name//赋值类名
  canvas_obj.style.position='absolute'

  let data_obj={};
  data_obj.data_info=data_info || {'width':'25000','height':'25000',scale:'0.02',scale_min:'0.002',scale_max:'0.05',scale_one:'0.001'}
  canvas_obj.style.width='100%'
  canvas_obj.style.height='100%'
  canvas_obj.width=data_obj.data_info.width || '2000'
  canvas_obj.height=data_obj.data_info.height || '2000'
  data_obj.img = new Image();
  data_obj.div=div_obj
  data_obj.className=canvas_obj_class_name;
  data_obj.canvas=canvas_obj
  data_obj.scale=parseFloat(data_info.scale) || 1;//当前canvas的缩放比例
  data_obj.minScale=parseFloat(data_info.scale_min) || 0.05;//scale的最小缩放比例
  data_obj.maxScale=parseFloat(data_info.scale_max) || 100;//scale的最大缩放比例
  data_obj.scale_one=parseFloat(data_info.scale_one) || 0.1;//滚动一次放大缩小的值
  data_obj.startX=0;//鼠标滚动操作的时候的x值
  data_obj.startY=0;//鼠标滚动操作的时候的y值
  data_obj.temp_start_x=0//鼠标左击按下操作的时候鼠标的x值
  data_obj.temp_start_y=0;//鼠标左击按下操作的时候鼠标的y值
  data_obj.offsetx=0//鼠标左击按下操作的时候鼠标偏移的x值
  data_obj.offsety=0;//鼠标左击按下操作的时候鼠标偏移的y值
  data_obj.mousedown_flag=false;//鼠标是否按下操作
  data_obj.x_val=0;//鼠标历史拖动x轴的值
  data_obj.x_val_init=parseFloat(canvas_obj.style.width.match(/\d+/)[0])/ 100 * 426;
  data_obj.y_val_init=parseFloat(canvas_obj.style.height.match(/\d+/)[0])/ 100 * 426;
  data_obj.x_val_init=0
  data_obj.y_val_init=0
  canvas_obj.style.top=-data_obj.x_val_init+'px'
  canvas_obj.style.left=-data_obj.y_val_init+'px'
  data_obj.y_val=0;//鼠标历史拖动y轴的值
  data_obj.init_flag=false
  data_obj.obj_data=[
    {x:0,y:0},
    {x:300,y:0},
    {x:600,y:0}
  ]
  //判断是否已经创建了这个style节点
  let styleobj_id=div_id+'_canvas_style_id'
  if (document.getElementById(styleobj_id)==null){
    let styleobj = document.createElement('style');//创建style节点
    styleobj.innerHTML=`
    .${data_obj.className} { 
    transform: scale(${data_obj.scale});
    } `;//设置初始放大倍数为1.0
    document.getElementsByTagName('head')[0].appendChild(styleobj)//将刚才创建的节点添加进<head>节点内
        styleobj.id=styleobj_id;
    data_obj.styleobj=styleobj
  }else{
    let styleobj = document.getElementById(styleobj_id);
    data_obj.styleobj=styleobj
  }
  let ctx = canvas_obj.getContext('2d');
  data_obj.ctx=ctx;

  //绑定绘画函数
  let draw_img=fangdasuoxiaohuabu_draw_img(data_obj)
  data_obj.draw_img=draw_img
  //绑定绘画函数2-移动绘画
  let draw_img2=fangdasuoxiaohuabu_draw_img2(data_obj)
  data_obj.draw_img2=draw_img2

  //绑定按下鼠标左键函数
  let mousedown=fangdasuoxiaohuabu_mousedown(data_obj)
  data_obj.mousedown=mousedown
  data_obj.div.addEventListener('mousedown', mousedown);
  //绑定鼠标移动函数
  let mousemove=fangdasuoxiaohuabu_mousemove(data_obj)
  data_obj.mousemove=mousemove
  data_obj.div.addEventListener('mousemove', mousemove);
  //绑定释放鼠标键函数
  
  let mouseup=fangdasuoxiaohuabu_mouseup(data_obj)
  data_obj.mouseup=mouseup
  data_obj.div.addEventListener('mouseup', mouseup);
  //绑定鼠标滚轮操作函数
  let handleScroll=fangdasuoxiaohuabu_handleScroll(data_obj)
  data_obj.handleScroll=handleScroll
  data_obj.div.addEventListener('wheel', handleScroll);
  //绑定点击canvas修改图片函数：弹框输入地址
  let changeimg=fangdasuoxiaohuabu_changeimg(data_obj)
  data_obj.changeimg=changeimg
  ///绑定点击canvas修改图片函数：传参输入地址
  let changeimg2=fangdasuoxiaohuabu_changeimg2(data_obj)
  data_obj.changeimg2=changeimg2
  //绑定重置函数
  let reset=fangdasuoxiaohuabu_reset(data_obj)
  data_obj.reset=reset
  //绑定点击鼠标右键函数 div
  let contextmenu2=fangdasuoxiaohuabu_contextmenu2(data_obj)
  data_obj.contextmenu=contextmenu2
  data_obj.div.addEventListener('contextmenu',contextmenu2)
  //绑定点击鼠标右键函数 canvas
  let contextmenu=fangdasuoxiaohuabu_contextmenu(data_obj)
  data_obj.contextmenu=contextmenu
  data_obj.canvas.addEventListener('contextmenu',contextmenu)
  
return data_obj
  }
  function fangdasuoxiaohuabu_draw_img(data_obj){
    let now_data_obj=data_obj;
    let res_func=function(e){
      //清空画布
      
      // now_data_obj.ctx.fillStyle = "gray"; // 设置填充颜色为灰色
      // now_data_obj.ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      //放大画布
      now_data_obj.styleobj.innerHTML=`
    .${data_obj.className} { 
    transform: scale(${data_obj.scale});
    } `;
// console.log('fangdasuoxiaohuabu_draw_img',now_data_obj.scale)
    // let parentNode = canvas.parentNode;
    // canvas.width =parseInt( parentNode.offsetWidth ); // 实际渲染像素
    // canvas.height = parseInt(parentNode.offsetHeight ); // 实际渲染像素
    // console.log('画布大小:','height:',canvas.width,'width:', canvas.height)
    // canvas.style.height='100%'//`${100/scale}%`//parseInt(parentNode.offsetHeight/scale)// 获取父节点的高度/scale
    // canvas.style.width='100%'//`${100/scale}%`//parseInt(parentNode.offsetWidth/scale);// 获取父节点的宽度
    // canvas.style.top=200-parseInt(parentNode.offsetHeight/scale)/2;// 获取父节点的宽度
    // canvas.style.left=200-parseInt(parentNode.offsetWidth/scale)/2;// 获取父节点的宽度
    
    //这个函数在canvas上绘制图像。在此处，img是一个图像对象，-img.width / 2和-img.height / 2是图像放置的位置。
    // console.log(now_img_info['x'],now_img_info.y,-img.width / 2,-img.height / 2)
    // ctx.draw_img(img, -img.width / 2+now_img_info.x, -img.height / 2+now_img_info.y);
    // ctx.draw_img(img, -img.width / 2-now_img_info.x, -img.height / 2-now_img_info.y);
    
  // 计算缩放比例
  // var scale = Math.min(targetWidth / now_data_obj.img.width, targetHeight / now_data_obj.img.height);

  // // 计算调整后的宽度和高度
  // var adjustedWidth = Math.floor(img.width * scale);
  // var adjustedHeight = Math.floor(img.height * scale);
// 绘制缩放后的图形
//按照比例 调整width显示100%覆盖背景

let div_w=parseFloat(now_data_obj.div.offsetWidth)
let div_h=parseFloat(now_data_obj.div.offsetHeight)
now_data_obj.ctx.clearRect(0, 0, now_data_obj.canvas.width, now_data_obj.canvas.height);
now_data_obj.canvas.style.width=(div_w/now_data_obj.scale)// 父节点（容器）大小 /scale 即可调整canvas为覆盖满父节点
now_data_obj.canvas.style.height=(div_h/now_data_obj.scale)// 父节点（容器）大小 /scale 即可调整canvas为覆盖满父节点
let can_w=parseFloat(now_data_obj.canvas.style.width)
let can_h=parseFloat(now_data_obj.canvas.style.height)
let suofangxiuzhengzuobiao=[-can_w/2*(1-now_data_obj.scale),-can_h/2*(1-now_data_obj.scale)];//缩放修正canvas坐标原点
now_data_obj.canvas.style.top=suofangxiuzhengzuobiao[1]+'px'
now_data_obj.canvas.style.left=suofangxiuzhengzuobiao[0]+'px'
now_data_obj.canvas.width=parseFloat(data_obj.data_info.width)/now_data_obj.scale
now_data_obj.canvas.height=parseFloat(data_obj.data_info.height)/now_data_obj.scale
//计算偏移显示区域
x1y1x2y2=[data_obj.x_val-500,data_obj.y_val-500,data_obj.x_val+500+div_w*now_data_obj.scale,data_obj.y_val+500+div_h*now_data_obj.scale]
for (let dddd=0;now_data_obj.obj_data.length>dddd;dddd++){
  let x=now_data_obj.obj_data[dddd].x;
  let y=now_data_obj.obj_data[dddd].y;
  if (x>x1y1x2y2[0] & x<x1y1x2y2[2] & y>x1y1x2y2[1] & y<x1y1x2y2[3]){
    now_data_obj.ctx.drawImage(now_data_obj.img,x-now_data_obj.x_val,y-now_data_obj.y_val,250,477);
  }
}
//重绘canvas内容
//-1对象偏移坐标
// let huabupianyizuobiao=(偏移距离*scale,)
// 对象实际坐标=缩放修正坐标(-style.width/2*scale)+对象坐标(坐标*scale)+画布偏移坐标(偏移距离*scale)
// if (now_data_obj.init_flag==false){
//   now_data_obj.ctx.clearRect(0, 0, now_data_obj.canvas.width, now_data_obj.canvas.height);
//   for (let rrr=0;rrr<50;rrr++)
// {now_data_obj.ctx.drawImage(now_data_obj.img,0+rrr*300,0,250,477);
//   now_data_obj.ctx.drawImage(now_data_obj.img,0+rrr*300,0+500,250,477);
// }
// }

    }
    return res_func
  }
  //移动图像
  function fangdasuoxiaohuabu_draw_img2(data_obj){
    let now_data_obj=data_obj;
    let res_func=function(e){
      //清空画布
let div_w=parseFloat(now_data_obj.div.offsetWidth)
let div_h=parseFloat(now_data_obj.div.offsetHeight)
now_data_obj.ctx.clearRect(0, 0, now_data_obj.canvas.width, now_data_obj.canvas.height);
// now_data_obj.canvas.style.width=(div_w/now_data_obj.scale)// 父节点（容器）大小 /scale 即可调整canvas为覆盖满父节点
// now_data_obj.canvas.style.height=(div_h/now_data_obj.scale)// 父节点（容器）大小 /scale 即可调整canvas为覆盖满父节点
// let can_w=parseFloat(now_data_obj.canvas.style.width)
// let can_h=parseFloat(now_data_obj.canvas.style.height)
// let suofangxiuzhengzuobiao=[-can_w/2*(1-now_data_obj.scale),-can_h/2*(1-now_data_obj.scale)];//缩放修正canvas坐标原点
// now_data_obj.canvas.style.top=suofangxiuzhengzuobiao[1]+'px'
// now_data_obj.canvas.style.left=suofangxiuzhengzuobiao[0]+'px'
// now_data_obj.canvas.width=parseFloat(data_obj.data_info.width)/now_data_obj.scale
// now_data_obj.canvas.height=parseFloat(data_obj.data_info.height)/now_data_obj.scale
//计算偏移显示区域
x1y1x2y2=[data_obj.x_val-500,data_obj.y_val-500,data_obj.x_val+500+div_w*now_data_obj.scale,data_obj.y_val+500+div_h*now_data_obj.scale]
for (let dddd=0;now_data_obj.obj_data.length>dddd;dddd++){
  let x=now_data_obj.obj_data[dddd].x;
  let y=now_data_obj.obj_data[dddd].y;
  if (x>x1y1x2y2[0] & x<x1y1x2y2[2] & y>x1y1x2y2[1] & y<x1y1x2y2[3]){
    now_data_obj.ctx.drawImage(now_data_obj.img,x-now_data_obj.x_val,y-now_data_obj.y_val,250,477);
  }
}
//重绘canvas内容
//-1对象偏移坐标
// let huabupianyizuobiao=(偏移距离*scale,)
// 对象实际坐标=缩放修正坐标(-style.width/2*scale)+对象坐标(坐标*scale)+画布偏移坐标(偏移距离*scale)
// if (now_data_obj.init_flag==false){
//   now_data_obj.ctx.clearRect(0, 0, now_data_obj.canvas.width, now_data_obj.canvas.height);
//   for (let rrr=0;rrr<50;rrr++)
// {now_data_obj.ctx.drawImage(now_data_obj.img,0+rrr*300,0,250,477);
//   now_data_obj.ctx.drawImage(now_data_obj.img,0+rrr*300,0+500,250,477);
// }
// }

    }
    return res_func
  }
//绑定鼠标滚动操作的函数
function fangdasuoxiaohuabu_handleScroll(data_obj){
    let now_data_obj=data_obj;
    let res=function(e) {
    e.preventDefault();//阻止默认事件
    now_data_obj.scale += now_data_obj.scale_one * (e.deltaY < 0 ? 1 : -1);
    if(now_data_obj.scale < now_data_obj.minScale) now_data_obj.scale = now_data_obj.minScale;
    if(now_data_obj.scale > now_data_obj.maxScale) now_data_obj.scale = now_data_obj.maxScale;
    now_data_obj.startX = e.clientX; // 记录鼠标按下的位置
    now_data_obj.startY = e.clientY;
    // console.log(e.deltaY,startX,startY)
    now_data_obj.draw_img();
    
}
return res
}

//绑定鼠标左键按下操作的函数
function fangdasuoxiaohuabu_mousedown(data_obj){
    let now_data_obj=data_obj;
let res =function(e) {
    now_data_obj.mousedown_flag = true; // 开始拖动canvas
    now_data_obj.temp_start_x = e.clientX; // 记录鼠标按下的位置
    now_data_obj.temp_start_y = e.clientY;
    now_data_obj.offsetx = now_data_obj.canvas.offsetLeft; // canvas的偏移量
    now_data_obj.offsety = now_data_obj.canvas.offsetTop;
}
return res
}
//绑定鼠标移动操作的函数
function fangdasuoxiaohuabu_mousemove(data_obj){
    let now_data_obj=data_obj;
let res=function(e) {
    if (!now_data_obj.mousedown_flag) return; // 如果未开始拖动，则返回
    var dx =  parseInt((1/data_obj.scale)*(data_obj.temp_start_x-e.clientX)) ; // 计算鼠标移动的距离
    var dy =  parseInt((1/data_obj.scale)*(data_obj.temp_start_y-e.clientY));
    var dx =  parseInt(1*(data_obj.temp_start_x-e.clientX)) ; // 计算鼠标移动的距离
    var dy =  parseInt(1*(data_obj.temp_start_y-e.clientY));
    // console.log('dx:',dx,'(1/scale):',(1/scale))
    // console.log('temp_start_y,e.clientY',temp_start_y,e.clientY)
    data_obj.temp_start_y=e.clientY
    // console.log('temp_start_y,e.clientY',temp_start_y,e.clientY)
    data_obj.temp_start_x=e.clientX
    // console.log('dx:',dx)
    data_obj.x_val= data_obj.x_val+dx
    data_obj.y_val= data_obj.y_val+dy
    // console.log('now_img_info.x  :',now_img_info.x)
    // data_obj.canvas.style.left = -data_obj.x_val_init-data_obj.x_val + 'px'; // 更新canvas的left属性，注意此处应为相对于窗口的偏移量
    // data_obj.canvas.style.top = -data_obj.x_val_init-data_obj.y_val + 'px'; // 更新canvas的top属性，注意此处应为相对于窗口的偏移量
    data_obj.startX = e.clientX; // 更新鼠标的位置
    data_obj.startY = e.clientY;
    data_obj.draw_img2(); // 重新绘制canvas上的内容
}
return res
}
//绑定鼠标左键按下后释放的操作函数
function fangdasuoxiaohuabu_mouseup(data_obj){
    let now_data_obj=data_obj;
let res=function(e) {
    now_data_obj.mousedown_flag = false; // 停止拖动canvas
    now_data_obj.startX = null; // 清空鼠标的位置
    now_data_obj.startY = null;
    now_data_obj.offsetX = null; // 清空canvas的偏移量
    now_data_obj.offsetY = null;
    now_data_obj.temp_start_x;
    now_data_obj.temp_start_y;
    now_data_obj.draw_img2(); // 重新绘制canvas上的内容
};
return res
}
//弹出对话框输入图片路径
function fangdasuoxiaohuabu_changeimg(data_obj){
    let now_data_obj=data_obj;
let res=function() {
    data_obj.img.src = prompt("请输入新的图片URL:");
    now_data_obj.reset()
}
    return res
}

//传入图片路径修改
function fangdasuoxiaohuabu_changeimg2(data_obj){
    let now_data_obj=data_obj;
let res=function(data) {
    data_obj.img.src = data;
    now_data_obj.reset()
}
    return res
}
//重置参数
function fangdasuoxiaohuabu_reset(data_obj){
    let now_data_obj=data_obj;
let res=function() {
  data_obj.scale=1;//当前canvas的缩放比例
  data_obj.minScale=0.05;//scale的最小缩放比例
  data_obj.maxScale=100;//scale的最大缩放比例
  data_obj.startX=0;//鼠标滚动操作的时候的x值
  data_obj.startY=0;//鼠标滚动操作的时候的y值
  data_obj.temp_start_x=0//鼠标左击按下操作的时候鼠标的x值
  data_obj.temp_start_y=0;//鼠标左击按下操作的时候鼠标的y值
  data_obj.offsetx=0//鼠标左击按下操作的时候鼠标偏移的x值
  data_obj.offsety=0;//鼠标左击按下操作的时候鼠标偏移的y值
  data_obj.mousedown_flag=false;//鼠标是否按下操作
  data_obj.x_val=-data_obj.x_val_init+0;//鼠标历史拖动x轴的值
  data_obj.y_val=-data_obj.y_val_init+0;//鼠标历史拖动y轴的值
  data_obj.draw_img();

}
    return res
}
//鼠标右击  canvas右击
function fangdasuoxiaohuabu_contextmenu(data_obj){
    let now_data_obj=data_obj;
let res=function(e) {
  e.preventDefault(); // 阻止默认的上下文菜单
  alert('Right-click detected at ' + e.clientX + ',' + e.clientY);
  
}
    return res
}
//鼠标右击2 div右击
function fangdasuoxiaohuabu_contextmenu2(data_obj){
    let now_data_obj=data_obj;
let res=function(e) {
  e.preventDefault(); // 阻止默认的上下文菜单
  alert('Right-click detected at ' + e.clientX + ',' + e.clientY);
  
}
    return res
}
  // var test=canvas_set('canvasrr')
  // test.changeimg2('C:\\Users\\Administrator.BF-202310091844\\Desktop\\ddd.jpg')











  var test1=function(data){
    // console.log(11111)
  }
  var test2=function(data){
    // console.log(22222)
  }


  function makeRequest(send_url,send_post_data, function1, function2) {
    // send_url 要发送的post数据的url
    // send_post_data 要发送post的post数据
    // receive_obj 要接收数据的变量 receive_obj={'data':null}
    // test_data   测试用的数据
    // function1   网络正常
    var xhr = new XMLHttpRequest();
    xhr.open("POST", send_url, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.onload = function () {
        if (xhr.status === 200) {
            // 请求成功，将返回的 JSON 数据解析为对象，并传递给 function1
            var data = JSON.parse(xhr.responseText);
            function1(data);
        } else {
            // 请求失败，运行 function2
            function2();
        }
    };

    xhr.onerror = function () {
        // 网络错误，运行 function2
        function2();
    };

    // 发送请求，参数为 JSON 格式的数据
    var data = { /* 你的 JSON 数据 */ };
    xhr.send(JSON.stringify(send_post_data));
}
// makeRequest('127.0.0.1:8888/eee',test1,test2)


// function get_data(send_url,send_post_data,function1) {
//   // send_url 要发送的post数据的url
//   // send_post_data 要发送post的post数据
//   // receive_obj 要接收数据的变量 receive_obj={'data':null}
//   // test_data   测试用的数据
//   // function1   网络正常
//   var xhr = new XMLHttpRequest();
//   xhr.open("POST", send_url, true);
//   xhr.setRequestHeader("Content-Type", "application/json");

//   xhr.onload = function () {
//       if (xhr.status === 200) {
//           // 请求成功，将返回的 JSON 数据解析为对象，并传递给 function1
//           var data = JSON.parse(xhr.responseText);
//           function1(data);
//       } else {
//           // 请求失败，运行 function2
//           function2();
//       }
//   };

//   xhr.onerror = function () {
//       // 网络错误，运行 function2
//       function2();
//   };

//   // 发送请求，参数为 JSON 格式的数据
//   var data = { /* 你的 JSON 数据 */ };
//   xhr.send(JSON.stringify(send_post_data));
// }







//解析数据格式为element 表头格式
function db_config_obj2element_table_data_head(data){
  // console.log('data!',data)
  //data={
  // 'id':{
  //   '名称':'色彩库id',
  //   '备注':'唯一id方便增删改查',
  //   '主键':true,
  //   '索引':null,
  //   '字段类型':'整型',
  //   '字段长度':[0,10],
  //   '前端输入限制':null,
  //   '前端输入限制提示':null,
  //   '前端上传限制':null,
  //   '前端上传限制提示':null,
  //   '前端是否显示':true,
  //   '前端是否可以修改':false,
  //   '前端配置参数':'{"width":120}',
  //   },
  //   'id2':{
  //   '名称':'色彩库id',
  //   '备注':'唯一id方便增删改查',
  //   '主键':true,
  //   '索引':null,
  //   '字段类型':'整型',
  //   '字段长度':[0,10],
  //   '前端输入限制':null,
  //   '前端输入限制提示':null,
  //   '前端上传限制':null,
  //   '前端上传限制提示':null,
  //   '前端是否显示':false,
  //   '前端是否可以修改':false,
  //   '前端配置参数':'{"width":120}',
  //   },
  //   }

  //res=[{'width':'100','label':'色彩库id','prop':'id',},]
  let res = [];
Object.keys(data).forEach(key => {
  if (data[key]['前端是否显示']) {
    let obj = {
      'label':data[key]['名称'],
      'prop': key,
    };
    for (let key2 in data[key]) {if (key2.startsWith("前端")){obj[key2]=data[key][key2]}}
    try {
      
      // console.log('start 前端配置参数1',data[key]['前端配置参数'])
      obj.width=JSON.parse(data[key]['前端配置参数']).width
      // console.log('start 前端配置参数2',obj.width)
      // 尝试执行代码，可能会抛出不同类型的错误
  } catch(err) {
    // console.log('start 前端配置参数3 error')
      obj.width=100
  } finally {
      // 无论 try 和 catch 块的结果如何，这段代码都将被执行
  }
    res.push(obj);
  }
});
return res
}
//创建虚拟element table 表头
function create_virtually_element_head(head_info){
//head_info=['色彩库id','色彩名称','色彩代号','创建时间','修改时间','创建人id','修改人id','备注']

let res=[]
for (let i =0;i<head_info.length;i++){
  res.push({'width':100,'label':head_info[i],'prop':'prop'+i})
}
return res
}
//根据elemen表头数据创建虚拟data
// b=[{'width':'100','label':'色彩库id','prop':'id',},
// {'width':'100','label':'色彩库id','prop':'id2',},
// {'width':'100','label':'色彩库id','prop':'ee3',},
// ] 使用js，根据b创建虚拟数据列表，列表内容格式为{id:'1',id2: '黑色','ee3':'sda'}，可以指定创建虚拟数据NN条
function create_virtually_element_head_data(head_data){
  let virtualDataList = [];
  let count = 0;
  let NN=parseInt(100*Math.random())
  while (count < NN) { // N是你想要创建的虚拟数据的数量
    let virtualData = {};
    
    for (let i = 0; i < head_data.length; i++) {
      let property = head_data[i]['prop'];
      virtualData[property] = Math.floor(Math.random() * 16777215).toString(16);
    }
    
    virtualDataList.push(virtualData);
    count++;
  }
  return virtualDataList
}

function add_xuhao_number(res_data,xuhao_name='xuhao',now_page=0,page_number=20){
//res_data=[{id:'1',id2: '黑色','ee3':'sda'},{id:'1',id2: '黑色','ee3':'sda'},{id:'1',id2: '黑色','ee3':'sda'}]
//xuhao_name  添加的属性名称
//now_page   当前第几页
//page_number  一页有多少数据
//res=[{xuhao:1,id:'1',id2: '黑色','ee3':'sda'},{xuhao:2,id:'1',id2: '黑色','ee3':'sda'},{xuhao:3,id:'1',id2: '黑色','ee3':'sda'}]
let count=now_page*page_number;
for (let i = 0; i < res_data.length; i++) {
  count++;
  res_data[i][xuhao_name]=count;
}
return res_data
}







function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  const clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}
window.obj_b2obj_a=function(b,receive,rename=null,id='id',name_lst=null){
  //b 被取出数据的对象 [{b_id:1,b:1,'e':'333'}]
  //a 被存入数据的对象 [{'val':[{a_id:1,c:1,d:2}]},'val']
  //name_lst 包含b中需要被取出对象的属性 null 或者 ['b','e']
  //id a和b都有的相同属性      如{a:'a_id',b:'b_id'} 表示a的属性a_id 和b的属性b_id相同才会进行属性迁移
  //rename b 中 要改名的属性  {b:'b_',c:'c_'}


  //场景1
  //传参        a=[{id:1,v:0}],b=[{id:1,c:0,d:0}]  name_lst=['c']
  //返回        {id:1,v:0,c:0}  且 a值改变
  
  //场景2
  //传参        a=[{id:1,v:0}],b=[{id:1,c:0,d:0}]  name_lst=null
  //返回        {id:1,v:0,c:0,d:0}  且 a值改变
//   console.log('a',a)
//   console.log('b',b)

let data___=receive[0];           //获取变量地址
// console.log('str!!!',data___,received_data)
let temp_lst=receive[1].split('.');          //拆分数组
let last_name=temp_lst[temp_lst.length-1];//最后一个变量的名字
for (let ii=0;ii<temp_lst.length-1;ii++){data___=data___[temp_lst[ii]]}
let a=data___[last_name]



  let res_lst=[];
  if (b==null || a==null || b.length==0 || a.length==0)return
      let c=0;
      let obj_b={}
      
      let len=null;
      //根据rename修改b对象的key值	
if (rename!=null){
        let new_b=[];
    for (let fsd=0;fsd<b.length;fsd++){
        let item=b[fsd];
    obj_b={}
    keys=Object.keys(item)//对象的 keys
    for (let sdflkas=0;sdflkas<keys.length;sdflkas++){//遍历原对象的 key
        let old_key=keys[sdflkas];//旧的key
        let new_key=rename[old_key];//新的key
        if (new_key!=null){obj_b[new_key]=item[old_key]}//检查新的key 存在  就按照新的key存储
        else{obj_b[old_key]=item[old_key]}//新的key不存在  就按照旧的key存储
            }
            new_b.push(obj_b)
        }
        b=new_b
}
      //如果迁移的属性列表为null表示默认全部迁移  如果不为null 表示只是迁移一部分  name_lst=['a','b','c']
      if (name_lst==null){name_lst=Object.keys(b[0] ).filter(name => name !== id);}
      len=name_lst.length;
      //将b格式化  [{},{},{}]-> {'id':{},'id':{}}
      let dct_b={};
      for (let i=0;i<b.length;i++){dct_b[b[i][id]]=b[i]}
  // console.log('id',id)
  // console.log('b',b)
  // console.log('dct_b',dct_b)
      //将需要迁移的数据存入temp
      for (let i=0;i<a.length;i++){
        // console.log('i',i)
        let item_a=JSON.parse(JSON.stringify(a[i]));//当前a的item   {a:1,b:2}
        let now_id=item_a[id];//获取id
        let item_b=dct_b[now_id];//获取当前b的item   {a:1,c:33}
        let temp_lst=[];//存放b的 c的值 [33]
        for (c=0;c<len;c++){temp_lst.push(item_b[name_lst[c]])}//对应name_lst将数据存入temp_lst
        
        for (c=0;c<len;c++){
          let new_name=name_lst[c];//需要存入的name名
          item_a[new_name]=item_b[new_name]//将b的name属性存入a中
        }
        res_lst.push(item_a);
    }

    data___[last_name]=res_lst
    return res_lst
      }

let a=[{'val':[{test_id:2,v:0},{test_id:2,v:22},]},'val'],b=[{id:1,c:0,d:'33'},{id:2,c:0,d:'3333'}],rename={'id':'test_id'}
obj_b2obj_a(b,a,rename,'test_id')





